<script setup>
import { Head, Link } from '@inertiajs/vue3'
import SpotlightLayout from '@/Layouts/SpotlightLayout.vue'
import Container from '@/Components/Spotlight/Container.vue'
import Card from '@/Components/Spotlight/Card.vue'
import CardTitle from '@/Components/Spotlight/CardTitle.vue'
import CardDescription from '@/Components/Spotlight/CardDescription.vue'
import LinkIcon from '@/Components/Spotlight/icons/LinkIcon.vue'
import PageHero from '@/Components/Spotlight/PageHero.vue'

const props = defineProps({
  projects: {
    type: Array,
    default: () => [],
  },
})

const toLinkLabel = (project) => {
  if (project?.link?.label) {
    return project.link.label
  }
  try {
    const url = new URL(project?.link?.href ?? '')
    return url.host
  } catch (e) {
    return project?.link?.href ?? ''
  }
}

const linkComponent = (project) => {
  if (project?.link?.external) {
    return 'a'
  }

  return Link
}

const linkAttributes = (project) => {
  if (project?.link?.external) {
    return {
      href: project.link.href,
      target: '_blank',
      rel: 'noopener noreferrer',
    }
  }

  return {
    href: project?.link?.href ?? '#',
  }
}
</script>

<template>
  <SpotlightLayout title="项目">
    <Head title="项目" />

    <Container class="mt-16 sm:mt-24">
      <PageHero
        title="项目是把想法落地的最好方式。"
        description="这里集中展示我正在迭代的产品与值得复盘的实验项目，让想法一步步落地。"
      />
    </Container>

    <Container class="mt-20">
      <ul
        role="list"
        class="grid grid-cols-1 gap-x-12 gap-y-16 sm:grid-cols-2 lg:grid-cols-3"
      >
        <Card
          v-for="project in props.projects"
          :key="project.name"
          as="li"
        >
          <div class="relative z-10 flex h-12 w-12 items-center justify-center rounded-full bg-zinc-100 dark:bg-zinc-800">
            <div class="h-6 w-6 rounded-full bg-primary-500" />
          </div>
          <h2 class="mt-6 text-base font-semibold text-zinc-800 dark:text-zinc-100">
            <CardTitle :href="project.link?.href ?? '#'" class="group">
              {{ project.name }}
            </CardTitle>
          </h2>
          <CardDescription>
            {{ project.description }}
          </CardDescription>
          <component
            :is="linkComponent(project)"
            v-bind="linkAttributes(project)"
            class="relative z-10 mt-6 flex items-center text-sm font-medium text-zinc-400 transition hover:text-primary-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/70 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:text-zinc-200 dark:hover:text-primary-300 dark:focus-visible:ring-offset-zinc-900"
          >
            <LinkIcon class="h-6 w-6 flex-none" />
            <span class="ml-2 truncate">{{ toLinkLabel(project) }}</span>
          </component>
        </Card>
      </ul>
    </Container>
  </SpotlightLayout>
</template>

